﻿<h3 class="important-tittle">Available Charts</h3>

<p>
    LiveCharts has 5 main charts, you will find how and when to use any of these objects in the next examples.
</p>

<ol style="list-style: none; padding: 0">
    <li>
        <h3>1. CartesianChart</h3>

        <p>
            The <i>Cartesian Chart</i> class allows you to plot any series that uses a
            <i>Cartesian coordinate system</i>, every point is a pair of values (<i>X</i>, <i>Y</i>),
            then how is LiveCharts able to plot <i>ChartValues&lt;double&gt;</i> if I only passed a value?
            simple, in simple terms <i>Y</i> will be the value you passed, and <i>X</i> the index of the value in
            the array, if you want to learn more about how LiveCharts works, you can read
            <a href="/App/examples/v1/wpf/Types and Configuration">this</a>.
        </p>

        <p>
            The Cartesian chart supports many series, you can combine any of these series in a Cartesian chart:
        </p>

        <div class="row spaced">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Line Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/lineSeries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Vertical Line Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/verticallineseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Column Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/columnseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Row Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/rowseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Stacked Area Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/stackedareaseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Vertical Stacked Area Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/verticalstackedareaseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Stacked Column Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/stackedcolumnseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Stacked Row Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/stackedrowsseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Heat Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/Heat Series.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>OHCL Series (Financial)</div>
                <img src="/App/Examples/v1/Available Charts/Images/ohclseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>Bubbles Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/buubleseries.jpg" />
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                <div>StepLine Series</div>
                <img src="/App/Examples/v1/Available Charts/Images/stepline.png" />
            </div>
        </div>

        <p>
            Here is an example, notice some series use a specialized
            point, LiveCharts already knows how to plot many types, if you need to define your own,
            please take a read <a href="/App/examples/v1/wpf/Types and Configuration">here</a>, it is
            pretty easy.
        </p>

        <pre class="prettyprint">using LiveCharts;
using LiveCharts.Defaults; //Contains the already defined types
LiveCharts.SeriesCollection series = new LiveCharts.SeriesCollecion 
{
  new LineSeries
  {
    //The ObservableValue class notifies the chart to update when value changes
    Values = new ChartValues&lt;LiveCharts.Defaults.ObservableValue&gt;
    {
        new LiveCharts.Defaults.ObservableValue(4),
        new LiveCharts.Defaults.ObservableValue(4),
        // ...
    }
  },
  new ColumnSeries
  {
    Values = new ChartValues&lt;ObservableValue&gt;
    {
      new ObservableValue(4),
      new ObservableValue(2),
      // ...
    }
  },
  new OhlcSeries
  {
    Values = new ChartValues&lt;OhlcPoint&gt;
    {
      new OhlcPoint(32, 35, 30, 32),
      new OhlcPoint(33, 38, 31, 37),
      // ..
    }
  }
}</pre>
    </li>
    <li>
        <h3>2. Pie Chart</h3>

        <p>Use it to plot pies and doughnuts</p>
    </li>
    <li>
        <h3>3. Gauge</h3>

        <p>It has 2 modes, 180 and 360 degrees, useful to display progress or completion</p>
    </li>
    <li>
        <h3>4. Angular Gauge</h3>

        <p>Use it to display the current value in a range, for example a velocimeter</p>
    </li>
    <li>
        <h3>5. Maps</h3>

        <p>We also support geo heat maps, they compare the values according to geographic zone</p>
    </li>
</ol>
